<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>抽材料</title>
    <link rel="stylesheet" href="/w/css/weui.css" />
    <link rel="stylesheet" href="/w/css/weuix.css" />
    <link rel="stylesheet" href="css/kinerLottery.css?v.1.1.4">

    <script src="/w/js/zeptonew.min.js"></script>
    <script src="/w/js/zepto.weui.js"></script>
    <script src="/w/js/mui.min.js"></script>
    <script src="js/kinerLottery.js?v1.3"></script>
    <script src="/w/js/wx.js"></script>
    <script src="/w/js/vue.min.js"></script>
    <script src="/w/js/vue-lazyload.js"></script>

    <style>
        body,html {
            position: relative;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            touch-action: none;
            overflow: hidden !important;
            background: rgb(100, 137, 204);
        }
        
        .container::-webkit-scrollbar {
            display: none
        }
        
        .container.page-bg {
            background-color: rgb(100, 137, 204);
            display: none;
        }
        
        .kuan {
            background-image: url(images/bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: auto;
            width: 100%;
            margin: 0 auto;
        }
        
        .rotate-con-wai {
            background: url(images/box.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 100%;
            position: absolute;
            margin: 0 auto;
            top: -0.6rem;
            left: 0;
            right: 0;
            z-index: 0;
        }
        
        .backicon {
            position: fixed;
            left: 2px;
            top: 2px;
			z-index: 999;
        }
        
        .backicon a {
            color: white;
            font-size: 36px;
        }
        
        .synice {
            background-image: url(./images/display.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #fff;
            font-size: 0.9rem;
            font-weight: bold;
            padding: 5px;
            display: block;
            width: 50%;
            margin: 5px auto;
        }
        
        .weui-flex.bot {
            padding-top: 15px;
            padding-bottom: 15px;
        }
        
        .weui-flex .weui-flex__item {
            text-align: center;
        }
        
        [v-cloak] {
            display: none;
        }
        
        .bg-orange {
            width: 60%;
            background: rgb(253, 237, 143);
            color: red;
            font-size: 15px;
        }
		.popuAlert{
			
		}
		.popuAlert .weui-flex__item{
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.popuAlert .weui-flex__item .popuWord{
			color:black;
		}
		.btnKnow{
			background: rgb(232, 178, 130);
			color:rgb(95, 123, 177);
			font-size: 16px;
			font-weight: bold;
		}
    </style>
   
</head>

<body ontouchstart>
    <div class="container page-bg" id="container">
        <div class="backicon">
            <img src="/w/images/backhome.png" id="doback" style="position: absolute;top: 9px;width: 40px;left: 12px;">
        </div>
        <!--活动规则-->
        <div class="kuan">
            <div class="maintitle" style="position: relative;top:3rem">
                <img src="./images/title.png" style="width:75%;top:3rem;margin:0 auto;left:0;right:0;">
                <img src="./images/decoration.png" style="position: absolute;left: 0;top: 11rem;width: 100%;">
            </div>

            <div id="box" class="box">
                <div class="outer KinerLottery KinerLotteryContent"><img src="./images/Turntable.png" /></div>
                <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
                <div class="inner KinerLotteryBtn start"></div>
                <br><br><br><br><br><br>
                <br><br><br>
                <div class="space"></div>
                <div class="rotate-con-wai" id="wa1i">
                    <img src="./images/box.png" style="visibility: hidden;width:100%;" />
                </div>
            </div>

            <div style="clear: both;"></div>

            <div style="position: relative;z-index: 1;height: 7rem;margin-top: -4.1rem;left:0;right: 0;">
                <img src="./images/man.png" style="position: absolute;width: 23%;">
                <img src="./images/gold.png" style="position: absolute;width: 32%;left: 13%;bottom: -7%;">
            </div>

            <div class="maintitle" style="position: relative;left: 0;right: 0;" id="maintitle" v-cloak>
                <span style="color:rgb(255,255,255);font-size: 0.8rem;">每次消耗<span style="color: #F9DF54;font-size: 16px;">&nbsp;&nbsp;{{model.needBeen}}&nbsp;&nbsp;</span>纳思豆</span>
                <span class="synice" v-if="model.nasiBeen!=''">剩余纳思豆:{{model.nasiBeen}}</span>
            </div>
        </div>

        <div class="weui-flex bot" id="bot">
            <div class="weui-flex__item" @click="doPlay(5)">
                <a href="javascript:;" class="weui-btn bg-orange" id="chou5"><i ></i>抽5次</a>
            </div>
            <div class="weui-flex__item" @click="doPlay(10)">
                <a href="javascript:;" class="weui-btn bg-orange" id="chou10"><i ></i>抽10次</a>
            </div>
        </div>

    </div>


    <!--工具类-->
    <script src="/w/js/util.js?v1.1.3" type="text/javascript"></script>
    <script>
        var authKey = null;
        $(function() {
           authKey = getUrlParam("authKey");
            //authKey = 'E32946D4EC5B7070BAAE982B62FF162F'
            initData()
        });
        var KinerLottery = new KinerLottery({
            rotateNum: 8, //转盘转动圈数
            body: "#box", //大转盘整体的选择符或zepto对象
            direction: 0, //0为顺时针转动,1为逆时针转动
            doing: true,
            disabledHandler: function(key) {
                switch (key) {
                    case "noStart":
                        alert("活动尚未开始");
                        break;
                    case "completed":
                        alert("活动已结束");
                        break;
                }
            }, //禁止抽奖时回调
            clickCallback: function(e) {
                //console.log(e)
                let that = this
				that.turnModel = 'single'
                if (vue1.model.left > 0) {
					postAjax2({id: 2,method: "signuser_getChosePrizeList",params: {"authKey": authKey,"number": 1}
                    //postAjax2({id: 2,method: "signuser_getOnePrizeV2",params: {"authKey": authKey,"activityId": 30}
                    }, function(datas) {
                        //console.log(JSON.stringify(datas));
                        if (datas.error_code == undefined) {
                            datainfo = datas;
							datas.forEach(function(item, index) {
								if(index == 0 ){
									//console.log(index + "-"+ item.location)
									that.goKinerLottery(360 - item.location)
								}
							})
                        } else if (datas.message != '') {
                        	$.alert(datas.message, "提示", function() {
                        		KinerLottery.doing = false
                                return;
                            })
                        }
                    });
                } else {
                    mui.alert("今天的抽奖次数用尽，请明天在来。", "提示", function() {
                    })
                    return;
                }
            },
            //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
            KinerLotteryHandler: function(deg) {
					
				//console.log(KinerLottery.turnModel)
				if(KinerLottery.turnModel == 'single'){
					var str = "<img src='" + datainfo[0].thumbImg + "' style='width:65px;height:65px;'><br>获得："
					$.alert(str + datainfo[0].prizeName, "恭喜您获得：", function() {
						//return alert('回调');
						initData()
						KinerLottery.doing = false
						return;
					})
				}else if(KinerLottery.turnModel == 'more'){
					//console.log("more")
					var alertStr = '<div class="popuAlert weui-flex">'
						//console.log("123")
					let datas = vuebtn.model
					if (!utilsClass.isEmpty(datas)) {
						datas.forEach(function(item, index) {
							//console.log(item)
							alertStr +='<div class="popuItem weui-flex__item">'
							alertStr += "<img src='" + item.thumbImg + "' class='pupuIcon'>"
							alertStr +="<text class='popuWord'>×" + item.quantity + "</text>"
							alertStr +='</div>'
						})
						alertStr +='</div>'
						$.modal({
							title: "恭喜您获得：",
							text: alertStr,
							buttons: [
								{ text: "知道了", className:"btnKnow", onClick: function(){
										$("#chou"+vuebtn.value+" i").removeClass('weui-loading')
										initData()
										KinerLottery.doing = false
										return;
									}
								}
							]
						})
					}
				}
			}
        });
    </script>
    <!--滚动 start-->
    <script type="text/javascript">
        var vue1 = null,
            vuebtn = null,
            datainfo = null;

        document.onreadystatechange = function() {
            if (document.readyState == "complete") {
                vuebtn = new Vue({el: "#bot",data: {model: null,value: null},
                    methods: {
                        doPlay(value) {
							if(KinerLottery.doing){
								$.alert("转盘已启动，请稍后在试...","提示",function(){})
								return;
							}
							KinerLottery.turnModel = 'more'
							if(!$("#chou"+value+" i").hasClass("weui-loading")){
								$("#chou"+value+" i").addClass('weui-loading')
								postAjax2({id: 2,method: "signuser_getChosePrizeList",params: {"authKey": authKey,"number": value}
								}, function(datas) {
								    //console.log(JSON.stringify(datas));
									if (datas.error_code == undefined) {
										if(!utilsClass.isEmpty(datas)){
											if(!utilsClass.isEmpty(vuebtn)){
												datas.forEach(function(item, index) {
													if(index == 0 ){
														//console.log(index + "-"+ item.location)
														KinerLottery.goKinerLottery(360 - item.location)
													}
												})
												vuebtn.model = datas
												vuebtn.value = value
											}
										}
									}else if (datas.message != '') {
											$.alert(datas.message, "提示", function() {
												KinerLottery.doing = false
												$("#chou"+value+" i").removeClass('weui-loading')
										        return;
										    })
									}
								});
							}
                        }
                    }
                })
            }
        }

        function initData() {
            postAjax({id: 2,method: "signuser_getPrizeInfoV2",params: {"authKey": authKey,"activityId": 30}
            }, function(datas) {
                //console.log(JSON.stringify(datas));
                if (datas != '') {
                    if (vue1 == null) {
                        vue1 = new Vue({el: "#maintitle",data: {model: datas}})
                    } else {
                        vue1.model = datas;
                    }
                    setTimeout(() => {
                        $("#container").show();
                    }, 500)
                }
            });

        }
        //返回
        document.getElementById("doback").addEventListener("tap", function() {
            window.location.replace("https://www.dalinicegroup.com/w/salespro/pinzhibuilding/index_app.html?v1.2&authKey="+authKey)
        })
    </script>
    <!--滚动 end-->
    <script>
        var overscroll = function(el) {
            el.addEventListener('touchstart', function() {
                var top = el.scrollTop,
                    totalScroll = el.scrollHeight,
                    currentScroll = top + el.offsetHeight;
                if (top === 0) {
                    el.scrollTop = 1;
                } else if (currentScroll === totalScroll) {
                    el.scrollTop = top - 1;
                }
            });
            el.addEventListener('touchmove', function(evt) {
                if (el.offsetHeight < el.scrollHeight)
                    evt._isScroller = true;
            });
        }
        overscroll(document.querySelector('.container'));
        document.body.addEventListener('touchmove', function(evt) {
            if (!evt._isScroller) {
                evt.preventDefault();
            }
        });
    </script>
</body>

</html>